<template>
    <div class="con">
        <div class="header">
            <img src="../assets/images/award.png" alt class="toutu">
            <img src="../assets/images/award1.png" alt class="title">
            <div class="main">
                <img src="../assets/images/award3.png" alt.main>
                <div class="text">
                    <p>每邀请1个人</p>
                    <p style="margin:5px 0px">
                        <b>
                            获取VIP会员
                            <span>{{data.reward1}}</span>天
                        </b>
                    </p>
                    <p>邀请到第88人</p>
                    <p style="margin:5px 0px">
                        <b>
                            额外赠送VIP会员
                            <span>{{data.reward2}}</span>天
                        </b>
                    </p>
                </div>
            </div>
        </div>
        <div class="award">
            <img src="../assets/images/award4.png" alt>
            <div class="awardtext">
                <p>
                    已邀请
                    <span>{{data.inviteCount}}</span>人
                </p>
                <p style="margin-top:5px">
                    已获得VIP
                    <span>{{data.vipDays}}</span>天
                </p>
            </div>
            <button @click="ok()">领取奖励</button>
        </div>

        <div class="listdl">
            <dl>
                <dd></dd>
                <dt>活动时间无限制，人数无限制，多邀多得，上不封顶；</dt>
            </dl>
            <dl>
                <dd></dd>
                <dt>本活动中获得的所有奖励均不可升级、退款、折现、转让；</dt>
            </dl>
            <dl>
                <dd></dd>
                <dt>一经发现作弊行为，取消获奖资格，严重者将被封号处理；</dt>
            </dl>
            <dl>
                <dd></dd>
                <dt>若邀请的好友超过50%为僵尸号（注册后无任何操作，如使用、分享、浏览等），则被判为作弊，取消奖励资格；</dt>
            </dl>
            <dl>
                <dd></dd>
                <dt>每一个IP地址最多注册3位用户；</dt>
            </dl>
            <dl>
                <dd></dd>
                <dt>该活动最终解释权归卡宝钱包所有；</dt>
            </dl>
        </div>
        <p class="tip">该活动及奖励与Apple Inc.无关</p>

        <!-- 点击跳个一个链接，让ios 安卓端接收 -->
        <div class="btn" @click="share()">立即分享</div>

        <!-- 示例弹框2 -->
        <div class="bg" v-show="pop2">
            <div class="pop" style="background:none">
                <img src="../assets/images/adv1.png" alt class="img">
                <div class="poptext">
                    <h3>恭喜您获得VIP会员</h3>
                    <p style="font-size:18px">
                        <span>{{data.vipDays}}</span> 天
                    </p>
                    <p>信用卡收款立享低费率</p>
                </div>

                <div class="close" @click="close2">
                    <img src="../assets/images/close.png" alt>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "share",
    data() {
        return {
            pop2: false,
            timestamp: "",
            data: {},
            userId: ""
        };
    },
    methods: {
        share() {
            location.href = "share";
        },

        close2() {
            this.pop2 = false;
        },
        // 领取奖励
        ok() {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/active/getInviteAwards?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: Number(this.userId)
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.pop2 = true;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.userId = this.$route.query.userId;

        this.axios({
            method: "post",

            url: `${
                this.siteUrl
            }/app/active/getInviteInfo?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: Number(this.userId)
            }
        })
            .then(response => {
                if (response.data.success == 1) {
                    this.data = response.data.data;
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #ff355d;
}
.con .header {
    position: relative;
}
.con .toutu {
    width: 100%;
}
.con .title {
    width: 90%;
    position: absolute;
    top: 28px;
    left: 5%;
}
.main {
    width: 90%;
    position: absolute;
    top: 100px;
    left: 5%;
}
.main img {
    width: 100%;
}
.con .text {
    position: absolute;
    width: 50%;
    left: 23%;
    bottom: 18%;
    text-align: center;
    font-size: 12px;
    font-weight: 200;
}
.con .text b {
    font-size: 14px;
}
.con .text span,
.award .awardtext span {
    color: #ff724f;
}
.award {
    position: relative;
}
.award img {
    width: 94%;
    margin-left: 3%;
}
.award .awardtext {
    position: absolute;
    left: 12%;
    top: 20px;
    font-weight: 600;
}
.award button {
    position: absolute;
    right: 28px;
    top: 24px;
    width: 80px;
    height: 32px;
    background: #21d39a;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0px 4px 10px 0px;
    font-size: 12px;
}

.listdl {
    margin-top: 15px;
}
.listdl dl {
    width: 90%;
    margin-left: 5%;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 200;
}
.listdl dd {
    float: left;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #4ac9ff;
    margin-top: 8px;
}
.listdl dt {
    float: left;
    width: 90%;
    line-height: 24px;
    margin-left: 10px;
}
.btn {
    width: 100%;
    background: #4c70ff;
    text-align: center;
    height: 56px;
    line-height: 56px;
    color: #fff;
}
/* 弹框 */
.bg {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.bg .pop {
    width: 80%;
    background: #fff;
    margin-left: 10%;
    margin-top: 35%;
    text-align: center;
    position: relative;
}
.bg .pop button {
    width: 90px;
    height: 32px;
    color: #ff724f;
    border: 1px solid #ff724f;
    background: transparent;
    border-radius: 4px;
}
.bg .pop p {
    font-size: 12px;
    color: #939393;
    margin-top: 10px;
    padding-bottom: 20px;
}
.bg .pop .img {
    width: 100%;
}
.bg .poptext {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 110px;
}
.bg .poptext h3 {
    font-size: 18px;
}
.bg .poptext span {
    color: #ff724f;
    font-size: 64px;
}
.bg .poptext p {
    color: #2d3659;
}
.bg .close {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    margin-top: 50px;
}

.bg .close img {
    width: 30px;
    margin-left: 10px;
    margin-top: 10px;
}
.tip{
    font-size: 10px;
    color:#FFA3B5;
    text-align: center;
    margin-top:20px;
    margin-bottom: 5px;
}
</style>
